<template>
  <div>
    <el-dialog
      title="详情"
      :visible.sync="dialogVisible"
      width="60%"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :before-close="beforeCloseDialog"
      append-to-body
    >
      <div style="height: 55vh; overflow-y: scroll;">
        <el-collapse v-model="activeName" accordion>
          <el-collapse-item title="实例信息" name="1">
            <div>
              <el-table
                :data="detailCloudNativeYamlInfo.instanceInfos"
                style="width: 100%"
                :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ textAlign: 'center' }"
                stripe
              >
                <el-table-column
                  label="实例名称"
                >
                  <template slot-scope="scope">
                    <el-tooltip
                      effect="dark"
                      :content="scope.row.instanceName"
                      placement="bottom-start"
                      popper-class="tooltipClass"
                    >
                      <div class="descSpan">
                        {{ scope.row.instanceName }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="host"
                  label="主机地址"
                >
                </el-table-column>
                <el-table-column
                  prop="podIp"
                  label="实例IP"
                >
                </el-table-column>
                <el-table-column
                  prop="status"
                  label="状态"
                >
                </el-table-column>
                <el-table-column
                  prop="restart"
                  label="重启次数"
                  width="80rem"
                >
                </el-table-column>
                <el-table-column
                  prop="version"
                  label="实例版本"
                  width="80rem"
                >
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  label="创建时间"
                  width="180"
                >
                  <template slot-scope="scope">
                    <div class="descSpan">
                      {{ scope.row.createTime.split('T')[0] }}
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
          <el-collapse-item title="端口信息" name="2">
            <div
              v-for="(
                        portInfo, index
                      ) in detailCloudNativeYamlInfo.portInfos"
              :key="portInfo.port"
              style="margin-bottom: 5px"
            >
              <el-row>
                <el-col :span="4">
                  <span> 协议： </span>
                  <el-input
                    :disabled="true"
                    style="width: 80px"
                    v-model="portInfo.protocol"
                    size="mini"
                  >
                  </el-input>
                </el-col>
                <el-col :span="4">
                  <span> 内部端口： </span>
                  <el-input
                    style="width: 80px"
                    v-model="portInfo.port"
                    disabled
                    size="mini"
                  >
                  </el-input>
                </el-col>
                <el-col :span="6">
                  <span> 暴露端口： </span>
                  <el-input
                    style="width: 80px"
                    v-show="!portInfo.fixed"
                    disabled
                    size="mini"
                    placeholder="随机端口"
                  >
                  </el-input>
                  <el-input
                    style="width: 80px"
                    v-model="portInfo.expose"
                    v-show="portInfo.fixed"
                    disabled
                    size="mini"
                  >
                  </el-input>
                </el-col>
                <!--                <el-col :span="3">-->
                <!--                  <el-switch-->
                <!--                    active-text="开启域名"-->
                <!--                    v-model="portInfo.enableDns"-->
                <!--                    disabled-->
                <!--                  >-->
                <!--                  </el-switch>-->
                <!--                </el-col>-->
                <el-col :span="7" v-show="portInfo.enableDns">
                  <span> DNS： </span>
                  <el-input
                    style="width: 120px"
                    v-model="portInfo.dns"
                    size="mini"
                    disabled
                  >
                  </el-input>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
          <el-collapse-item title="资源需求" name="5" v-if="null !== detailCloudNativeYamlInfo.resourceInfo">
            <div>
              <el-row>
                <el-col :span="9">
                  <div style="margin-bottom: 5px">
                    <span> CPU预留： </span>
                    <el-input
                      style="width: 250px"
                      v-model="detailCloudNativeYamlInfo.resourceInfo.cpuRequest"
                      controls-position="right"
                      :min="0.1"
                      :max="256"
                      :step="0.1"
                      type="number"
                      size="mini"
                      disabled
                    >
                      <template v-slot:append>核</template>
                    </el-input>
                  </div>
                  <div
                    v-show="detailCloudNativeYamlInfo.resourceInfo.enableLimit"
                  >
                    <span> CPU限制： </span>
                    <el-input
                      style="width: 250px"
                      v-model="detailCloudNativeYamlInfo.resourceInfo.cpuLimit"
                      controls-position="right"
                      :min="0.1"
                      :max="256"
                      :step="0.1"
                      type="number"
                      size="mini"
                      disabled
                    >
                      <template v-slot:append>核</template>
                    </el-input>
                  </div>
                </el-col>
                <el-col :span="9">
                  <div style="margin-bottom: 5px">
                    <span> 内存预留： </span>
                    <el-input
                      style="width: 250px"
                      v-model="detailCloudNativeYamlInfo.resourceInfo.memRequest"
                      controls-position="right"
                      :min="4"
                      :max="16384"
                      :step="256"
                      type="number"
                      size="mini"
                      disabled
                    >
                      <template v-slot:append>MB</template>
                    </el-input>
                  </div>
                  <div
                    v-show="detailCloudNativeYamlInfo.resourceInfo.enableLimit"
                  >
                    <span>内存限制： </span>
                    <el-input
                      style="width: 250px"
                      v-model="detailCloudNativeYamlInfo.resourceInfo.memLimit"
                      controls-position="right"
                      :min="4"
                      :max="16384"
                      :step="256"
                      type="number"
                      size="mini"
                      disabled
                    >
                      <template v-slot:append>MB</template>
                    </el-input>
                  </div>
                </el-col>
                <el-col :span="6">
                  <el-switch
                    v-model="detailCloudNativeYamlInfo.resourceInfo.enableLimit"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    disabled
                    :active-text="resourceLimitText"
                    @change="changeResourceLimitStatus"
                  >
                  </el-switch>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
          <el-collapse-item title="事件信息" name="3">
            <div>
              <el-table
                :data="detailCloudNativeYamlInfo.eventInfos"
                style="width: 100%"
                :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ textAlign: 'center' }"
                stripe
              >
                <el-table-column
                  prop="type"
                  label="事件类型"
                  width="120rem"
                >
                </el-table-column>
                <el-table-column
                  prop="reason"
                  label="事件原因"
                  width="160rem"
                >
                </el-table-column>
                <el-table-column
                  prop="note"
                  label="事件详情"
                >
                </el-table-column>
                <el-table-column
                  prop="time"
                  label="事件时间"
                  width="180rem"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
          <el-collapse-item title="操作信息" name="4">
            <div>
              <el-table
                :data="detailCloudNativeYamlInfo.operateInfos"
                style="width: 100%"
                :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{ textAlign: 'center' }"
                stripe
              >
                <el-table-column
                  prop="userName"
                  label="用户名称"
                  width="120rem"
                >
                </el-table-column>
                <el-table-column
                  prop="targetName"
                  label="目标名称"
                  width="160rem"
                >
                </el-table-column>
                <el-table-column
                  prop="targetType"
                  label="目标类型"
                >
                  <template slot-scope="scope">
                    {{ getOperationType(scope.row.targetType) }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="operatorIp"
                  label="操作IP"
                >
                </el-table-column>
                <el-table-column
                  label="日志信息"
                >
                  <template slot-scope="scope">
                    <el-tooltip
                      effect="dark"
                      :content="scope.row.logInfo"
                      placement="bottom"
                      popper-class="tooltipClass"
                    >
                      <div class="descSpan" style="text-align: left;">
                        {{ scope.row.logInfo }}
                      </div>
                    </el-tooltip>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="appType"
                  label="应用类型"
                >
                  <template slot-scope="scope">
                    {{ getAppType(scope.row.appType) }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="updateTime"
                  label="创建时间"
                  width="180rem"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <!--      <div class="deployButtonDiv">-->
      <span slot="footer" class="dialog-footer">
          <el-button type="primary" size="small"
                     class="el-button-primary-style"
                     @click="beforeCloseDialog(null)"
          >
          关 闭
        </el-button>
      </span>
      <!--      </div>-->
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: 'DetailYamlInfo',
    props: ['tmpCloudNative'],
    data() {
      return {
        dialogVisible: false,
        activeName: '1',
        detailCloudNativeYamlInfo: {
          resourceInfo: {},
          instanceInfos: [],
          portInfos: {},
          operateInfos: [],
          eventInfos: []
        },
        resourceLimitText: "开启资源限制",
      }
    },
    methods: {
      detailCloudNative() {
        this.$appManageApi.detailCloudYaml(this.tmpCloudNative.id).then(res => {
          if (res && res.code === 200) {
            this.detailCloudNativeYamlInfo = res.data
            if (this.detailCloudNativeYamlInfo.resourceInfo !== null) {
              if (this.detailCloudNativeYamlInfo.resourceInfo.enableLimit) {
                this.resourceLimitText = "开启资源限制"
              } else {
                this.resourceLimitText = "关闭资源限制"
              }
            }
          }
        })
      },
      beforeCloseDialog(done) {
        this.$emit('closeDetailCloudNative')
        this.dialogVisible = false
        this.activeName = '1'
        this.detailCloudNativeYamlInfo = {
          resourceInfo: {},
          instanceInfos: [],
          portInfos: {},
          operateInfos: [],
          eventInfos: []
        }
        if (done !== null) {
          done()
        }
      },
      getAppType(operateTarget) {
        const statusMap = {
          0: '资源管理中心',
          1: '应用商店',
          2: '容器管理平台'
        }
        return statusMap[operateTarget] || '未知类型'
      },
      changeResourceLimitStatus(status) {
        if (status) {
          this.resourceLimitText = "开启资源限制";
        } else {
          this.resourceLimitText = "关闭资源限制";
        }
      },
      getOperationType(operateTarget) {
        const statusMap = {
          0: '认证操作',
          1: '添加操作',
          2: '删除操作',
          3: '修改操作',
          4: '服务实例操作',
          5: '服务组实例操作',
          6: '云原生实例操作'
        }
        return statusMap[operateTarget] || '未知类型'
      }
    },
    beforeMount() {
      this.detailCloudNative()
    }
  }
</script>

<style scoped>

</style>
